<template>
    <n-input-group>
        <n-input v-model:value="value" readonly placeholder="请选择图标" clearable />
        <n-input-group-label>
            <n-icon>
                <component v-if="value" :is="value"/>
            </n-icon>
        </n-input-group-label>
        <n-button type="primary" @click="showIconStore">
            选择
        </n-button>
    </n-input-group>
    <n-modal v-model:show="iconStore">
        <div class="icon-box">
            <n-tabs type="line" animated>
                <n-tab-pane name="ionicons5" tab="ionicons5" style="overflow-y: scroll;height: 538px">
                    <n-grid x-gap="12" :cols="10">
                        <n-gi
                            class="icon-item"
                            v-for="icon in Object.entries(ionicons5)" :key="icon[0]"
                            @click="clickIcon('ionicons5-' + icon[0])"
                        >
                            <n-icon class="icon-icon" :component="icon[1]" size="30" />
                            <p>
                                {{ icon[0] }}
                            </p>
                        </n-gi>
                    </n-grid>
                </n-tab-pane>
                <n-tab-pane name="antd" tab="antd" style="overflow-y: scroll;height: 538px">
                    <n-grid x-gap="12" :cols="10">
                        <n-gi
                            class="icon-item"
                            v-for="icon in Object.entries(antd)" :key="icon[0]"
                            @click="clickIcon('antd-' + icon[0])"
                        >
                            <n-icon class="icon-icon" :component="icon[1]" size="30" />
                            <p>
                                {{ icon[0] }}
                            </p>
                        </n-gi>
                    </n-grid>
                </n-tab-pane>
            </n-tabs>
        </div>
    </n-modal>
</template>
<script setup lang="ts">
import * as ionicons5 from "@vicons/ionicons5"
import * as antd from "@vicons/antd"
import {ref, toRefs} from "vue"

const props = defineProps({
    value: {
        type: String
    }
})

const value = toRefs(props).value
const emits = defineEmits(["update:value"])

const iconStore = ref(false)
const showIconStore = () => {
    iconStore.value = true
}
const clickIcon = (icon: any) => {
    emits("update:value", icon)
    iconStore.value = false
}
</script>

<style scoped lang="less">
.icon-box {
    width: 900px;
    height: 600px;
    background-color: white;
    border-radius: 4px;
    padding: 10px;

    .icon-item {
        border-radius: 4px;
        margin-bottom: 4px;
        width: 100%;
        text-align: center;
        height: 78px;
        cursor: pointer;
    }

    .icon-item:hover {
        background-color: #e8eaec;
    }

    .icon-icon {
        margin-top: 4px;
    }

    p {
        font-size: 12px;
        overflow-wrap: break-word;
        margin-top: 8px;
    }
}
</style>
